*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
header{
    width: 7.2rem;
    height: .96rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -3;
    input{
        width: 6rem;
        height: .6rem;
        border: none;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
        padding-left: .19rem;
        background-color: #f7f7f7;
    }
    span{
        text-align: center;
        line-height: .72rem;
        display: inline-block;
        height: .6rem;
        width: .72rem;
        background-color: #f7f7f7;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
    }
}
nav{
    margin-top: .96rem;
    width: 7.2rem;
    display: flex;
    align-items: center;
    height: 10.80rem;
    >ul{
        flex-direction: column;
        height: 10.80rem;
        width:25%;
        overflow: scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        >li{
            position: relative;
            text-align: center;
            width: 100%;
            &:hover::before{
                display: block;
            }
            &::before{
                content: "";
                width: .06rem;
                height: .58rem;
                background-color: #ff5934;
                position: absolute;
                left: 0px;
                top: 25%;
                display: none;
            }
            >a{
                display: block;
                padding-top: .29rem;
                padding-bottom: .29rem;
                width: 100%;
                font-size: .27rem;
                text-decoration: none;
                color: #666666;
            }
        }
    }
    .nav_right{
        height: 10.85rem;
        padding:0rem 5%;
        width:65%;
        overflow-y: scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        >img{
            width: 4.88rem;
            height: 1.46rem;
        }
        h5{
            margin-top: .19rem;
            font-size: .31rem;
            margin-bottom: .38rem;
        }
        div{
            div{
                margin-top: .19rem;
                width: 100%;
                height: 1.48rem;
                display: flex;
                background-color: #f8f8f8;
                >img{
                    width: 1.32rem;
                    height: 1.32rem;
                }
                aside{
                    width: 1.82rem;
                    height: 1.32rem;
                    font-size: .25rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content:space-between ;
                li{
                    margin-bottom: .19rem;
                    margin-top:.19rem ;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width:33%;
                   
                    >img{
                        width: 1rem;
                        height: 1rem;
                    }
                    a{
                        margin-top: .19rem;
                        text-decoration: none;
                        font-size: .25rem;
                        display: block;
                        color: #777777;
                    }
                }
            }
        }
           
        >ul{
            display: flex;
            flex-wrap: wrap;
            justify-content:space-between ;
            li{
                margin-bottom: .19rem;
                margin-top:.19rem ;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width:33%;
                >img{
                    width: 1rem;
                    height: 1rem;
                }
                >a{
                    margin-top: .19rem;
                    text-decoration: none;
                    font-size: .25rem;
                    display: block;
                    color: #777777;
                }
            }
        }
        section{
            padding-bottom: .25rem;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: scroll;
            z-index: 3;
            &::-webkit-scrollbar{
                display: none;
            }
            border-bottom: 1px solid #ebebeb;
            a{
                display: block;
                text-decoration: none;
                &:hover a{
                    background-color: #efefef;
                    color: #000;
                }
                span{
                    width: 2rem;
                    font-size: .25rem;
                    display: block;
                    text-align: center;
                    color: #777777;
                }
               
            }
        }

    }
}
footer{
    height: 1rem;
    width: 7.2rem;
    position: fixed;
    background-color: white;
    bottom: 0px;
    left: 0px;
    ul{
        display: flex;
        align-items: center;
        
        li{
            margin-top: .19rem;
            width: 20%;
            font-size: .25rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            a{
                text-decoration: none;
                color: #999999;
            }
            &:nth-child(2) a{
                color: #de702a;
            }
        }
        img{
            width: .4rem;
            height: .4rem;
            
        }
    }
}